<template>
  <div class="order">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.type }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <div class="order-list">
      <el-row type="flex" align="middle" class="order-header">
        <el-col :span="14">
          <el-row type="flex" align="middle">
            <el-select v-model="value" placeholder="请选择" size="small" @change="handleOptions">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div class="name text-left">订单号详情</div>
          </el-row>
        </el-col>
        <div class="name">实付金额</div>
        <div class="name">订单状态</div>
        <div class="name">操作</div>
      </el-row>

      <el-row type="flex" class="order-item" v-for="(vo, index) in orderList" :key="index">
        <el-row type="flex" align="middle" class="header">
          <div class="name">
            {{ vo.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
          </div>
          <div class="name">订单号：{{ vo.order_no }}</div>
        </el-row>
        <el-row type="flex" class="body">
          <el-col :span="14">
            <el-row class="products" type="flex" v-for="(item, index) in vo.products" :key="index">
              <!-- 1：点播；2：直播；3：面授；4：班级； -->
              <template v-if="$util.inArray(item.type_id, [1, 2, 3, 4])">
                <el-row type="flex" justify="center" align="middle">
                  <EduCourseImage
                    :image="item.cover_url"
                    :courseType="item.type_id"
                    :promotionType="item.promotion_type"
                    :width="105"
                    :height="58"
                    @click="handleCoursePush(item)"
                  ></EduCourseImage>
                </el-row>
                <el-row type="flex" justify="space-between" class="info">
                  <div class="name" @click="handleCoursePush(item)">
                    {{ item.title }}
                  </div>
                  <!-- 已购买显示 -->
                  <template v-if="vo.status === 20">
                    <div class="rest" v-if="item.expire_rest === -1">
                      永久有效
                    </div>
                    <div class="rest" v-else-if="item.expire_rest === 0">
                      课程已过期
                    </div>
                    <div class="rest" v-else>
                      距离课程到期还有<span>{{ item.expire_rest }}</span
                      >天
                    </div>
                  </template>
                  <el-row type="flex">
                    <div class="price">售价：{{ item.price | formatMoney }}</div>
                    <div class="scribing" v-if="$util.isDef(item.scribing_price)">
                      {{ item.scribing_price | formatMoney }}
                    </div>
                  </el-row>
                </el-row>
              </template>
              <!-- 8：公开考试；9：专项练习；10：套卷； -->
              <template v-else-if="$util.inArray(item.type_id, [8, 9, 10])">
                <el-row type="flex" justify="space-between" class="info">
                  <el-row type="flex" align="middle">
                    <el-tag class="type exam" effect="plain" size="mini">考试</el-tag>
                    <div class="name">{{ item.title }}</div>
                  </el-row>
                  <!-- 已购买显示 -->
                  <template v-if="vo.status === 20">
                    <div class="rest" v-if="item.expire_rest === -1">
                      永久有效
                    </div>
                    <div class="rest" v-else-if="item.expire_rest === 0">
                      课程已过期
                    </div>
                    <div class="rest" v-else>
                      距离课程到期还有<span>{{ item.expire_rest }}</span
                      >天
                    </div>
                  </template>
                  <div class="price">售价：{{ item.price | formatMoney }}</div>
                </el-row>
              </template>
              <!-- 101：点播课时视频；102：点播课时音频；103：点播课时图文；104：点播课时电子书； -->
              <template v-else-if="$util.inArray(item.type_id, [101, 102, 103, 104])">
                <el-row type="flex" justify="space-between" class="info">
                  <el-row type="flex" align="middle">
                    <el-tag
                      class="type"
                      effect="plain"
                      size="mini"
                      :class="ClassSectionType[item.type_id]"
                      >{{ item.type_text }}</el-tag
                    >
                    <div class="name">{{ item.title }}</div>
                  </el-row>
                  <!-- 已购买显示 -->
                  <template v-if="vo.status === 20">
                    <div class="rest" v-if="item.expire_rest === -1">
                      永久有效
                    </div>
                    <div class="rest" v-else-if="item.expire_rest === 0">
                      课程已过期
                    </div>
                    <div class="rest" v-else>
                      距离课程到期还有<span>{{ item.expire_rest }}</span
                      >天
                    </div>
                  </template>
                  <div class="price">售价：{{ item.price | formatMoney }}</div>
                </el-row>
              </template>
              <!-- 商品 -->
              <template v-else-if="item.type_id == 11">
                <el-row type="flex" justify="center" align="middle">
                  <edu-image
                    :src="item.cover_url"
                    width="58px"
                    height="58px"
                    fit="cover"
                    @click="handleCoursePush(item)"
                  ></edu-image>
                </el-row>
                <el-row type="flex" justify="space-between" class="info">
                  <div class="name" @click="handleCoursePush(item)">
                    {{ item.title }}
                  </div>
                  <div class="rest">x{{ vo.ext_data.num }}</div>
                  <div
                    class="price"
                    v-if="vo.ext_data.credit_price > 0 && vo.ext_data.cash_price > 0"
                  >
                    {{ vo.ext_data.credit_price }}积分+{{ vo.ext_data.cash_price | formatMoney }}
                  </div>
                  <div class="price" v-else-if="vo.ext_data.credit_price > 0">
                    {{ vo.ext_data.credit_price }}积分
                  </div>
                  <div class="price" v-else-if="vo.ext_data.cash_price > 0">
                    {{ vo.ext_data.cash_price | formatMoney }}
                  </div>
                  <div class="free" v-else>免费</div>
                </el-row>
              </template>
            </el-row>
          </el-col>
          <el-row type="flex" justify="center" align="middle" class="column">
            <template v-if="vo.order_type == 11">
              <template v-if="vo.credit.credit > 0 && vo.payment > 0">
                <div class="total">总额：</div>
                <div class="total">{{ vo.credit.credit }}积分+{{ vo.payment | formatMoney }}</div>
              </template>
              <div class="total" v-else-if="vo.credit.credit > 0">
                总额：{{ vo.credit.credit }}积分
              </div>
              <div class="total" v-else-if="vo.payment > 0">
                总额：{{ vo.payment | formatMoney }}
              </div>
              <div class="total" v-else>总额：<span class="total-free">免费</span></div>
            </template>
            <div class="total" v-else>总额{{ vo.payment | formatMoney }}</div>
          </el-row>
          <el-row type="flex" justify="center" align="middle" class="column state">
            <!-- 支付状态:0-已取消 10-未付款 20-已付款 30-已申请退款,待确认 40-退款已确认,退款中 50-已退款 60-交易被关闭  70:已支付,但被管理员移除 -->
            <div :class="ClassOrderStatus[vo.status]">
              {{ vo.status_text }}
            </div>
          </el-row>
          <el-row type="flex" justify="center" align="middle" class="column operation">
            <el-link
              v-if="vo.status == 0"
              type="danger"
              :underline="false"
              @click="handieDeleteOrder(vo.order_no)"
              >删除订单</el-link
            >
            <template v-else-if="vo.status == 10">
              <el-link type="primary" :underline="false" @click="handiePayment(vo)">去支付</el-link>
              <el-link :underline="false" @click="handieCancelOrder(vo.order_no)">取消订单</el-link>
            </template>
            <el-link :underline="false" @click="onViewDetails(vo.order_no)">订单详情</el-link>
          </el-row>
        </el-row>
      </el-row>
    </div>
    <edu-no-data text="暂时没有订单哦~" v-if="$util.isEmpty(orderList)"></edu-no-data>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
    <order-details
      ref="orderDetails"
      :visible.sync="visible"
      @pay="handiePayment"
      @cancel="handieCancelOrder"
      @delete="handieDeleteOrder"
      @click="handleCoursePush"
    ></order-details>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
import EduCourseImage from '@/components/EduCourseImage'
import orderDetails from './components/order-details'
import { mapMutations } from 'vuex'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduPagination,
    EduCourseImage,
    orderDetails
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          type: 'all',
          title: '全部'
        },
        {
          type: 'finish',
          title: '已支付'
        },
        {
          type: 'waiting',
          title: '待支付'
        },
        {
          type: 'cancel',
          title: '已取消'
        }
      ],
      value: '',
      options: [
        {
          value: '1week',
          label: '一周内'
        },
        {
          value: '1month',
          label: '1个月内'
        },
        {
          value: '3month',
          label: '3个月内'
        },
        {
          value: '6month',
          label: '6个月内'
        },
        {
          value: 'this_year',
          label: '今年'
        },
        {
          value: 'earlier',
          label: '更早'
        }
      ],
      couponType: 'all',
      orderList: null,
      ClassCourseType: {
        1: 'video',
        2: 'live',
        3: 'multipart',
        4: 'classes'
      },
      ClassSectionType: {
        101: 'video',
        102: 'audio',
        103: 'text',
        104: 'book'
      },
      ClassOrderStatus: { 0: 'cancel', 10: 'no-pay', 20: 'yes-pay' },
      visible: false,
      routePath: 'all'
    }
  },
  mounted() {
    this.handleOrderInfo()
  },
  methods: {
    ...mapMutations({
      changeOrderData: 'order/SET_ORDER_DATA'
    }),
    // 分页
    handleCurrentChange() {
      this.handleOrderInfo()
    },
    // 获取订单列表
    handleOrderInfo() {
      this.$api.getOrder(
        this.routePath,
        {
          page: this.$store.getters['paginate/page'],
          count: 10,
          date: this.value
        },
        res => {
          this.orderList = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 10,
            total: res.data.total
          })
        }
      )
    },
    handleOptions(val) {
      this.value = val
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })
      this.handleOrderInfo()
    },
    // 去支付
    handiePayment(item) {
      this.$router.push({
        path: '/buy/confirm'
      })
      this.changeOrderData({
        order_no: item.order_no,
        payment: item.payment,
        return_url: '/my/finance/my_order'
      })
    },
    // 取消订单
    handieCancelOrder(id) {
      this.$messageBox
        .confirm('你确定要取消这个订单？')
        .then(() => {
          this.$api.getOrderCancel(
            {
              order_no: id
            },
            res => {
              this.visible = false // 关闭详情
              this.$message.success(res.msg)
              this.handleOrderInfo() // 加载列表
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 删除订单
    handieDeleteOrder(id) {
      this.$messageBox
        .confirm('你确定要删除这个订单？')
        .then(() => {
          this.$api.deleteOrder(
            {
              order_no: id
            },
            res => {
              this.visible = false // 关闭详情
              this.$message.success(res.msg)
              this.handleOrderInfo()
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 课程跳转
    handleCoursePush(item) {
      if (this.$util.inArray(item.type_id, [1, 2, 3, 4])) {
        this.$router.push({ path: '/course/' + item.id })
      } else if (this.$util.inArray(item.type_id, [11])) {
        this.$router.push({
          path: '/mall/details',
          query: {
            id: item.id
          }
        })
      }
    },
    // 查看详情
    onViewDetails(id) {
      this.$refs['orderDetails'].getData(id)
      this.visible = true
    },
    handleClickMenu(data) {
      this.routePath = data.type
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })
      this.handleOrderInfo()
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.order {
  .order-list {
    .order-header {
      height: 32px;
      background-color: #f6f9ff;
      ::v-deep .el-select {
        width: 148px;
        .el-input__inner {
          background-color: transparent;
          border: none;
        }
      }
      .name {
        &.text-left {
          padding-left: 60px;
          text-align: left;
        }
        flex: 1;
        font-size: 13px;
        color: $text-color-secondary;
        text-align: center;
      }
    }
  }
  .order-item {
    flex-direction: column;
    margin-top: 10px;
    border: 1px solid $border-color-wireframe;
    .header {
      height: 32px;
      padding-left: 10px;
      background-color: #f6f9ff;
      .name + .name {
        margin-left: 25px;
      }
      .name {
        font-size: 13px;
        color: $text-color-secondary;
      }
    }
    .body {
      flex: 1;
      .products {
        padding: 15px 10px;
      }
      .products + .products {
        border-top: 1px solid $border-color-wireframe;
      }
      .column {
        flex: 1;
        flex-direction: column;
        border-left: 1px solid $border-color-wireframe;
      }
      .info {
        flex: 1;
        min-height: 58px;
        margin-left: 10px;
        flex-direction: column;
        .name {
          max-width: 360px;
          font-size: 13px;
          color: $text-color-import;
          @include ellipsis;
          cursor: pointer;
        }
        .rest {
          font-size: 12px;
          font-weight: 400;
          color: $text-color-secondary;
          span {
            color: #f54030;
          }
        }
        .price {
          font-size: 12px;
          color: $text-color-secondary;
        }
        .free {
          font-size: 12px;
          color: $text-color-free;
        }
        .scribing {
          margin-left: 15px;
          font-size: 12px;
          text-decoration: line-through;
          color: $text-color-auxiliary;
        }
        .type {
          border-radius: 0;
          border-top-left-radius: 8px;
          border-bottom-right-radius: 8px;
          margin-right: 5px;
          &.video {
            @include edu-color-primary(border-color);
            @include edu-color-auxiliary;
          }
          &.audio {
            border-color: #67c23a;
            color: #67c23a;
          }
          &.text {
            border-color: #783ce6;
            color: #783ce6;
          }
          &.book {
            border-color: #e6a23c;
            color: #e6a23c;
          }
          &.exam {
            border-color: #1644ff;
            color: #1644ff;
          }
        }
      }
      .total {
        font-size: 13px;
        color: $text-color-secondary;
        line-height: 18px;
        text-align: center;
      }
      .total-free {
        font-size: 13px;
        color: $text-color-free;
        line-height: 18px;
        text-align: center;
      }
      .state {
        font-size: 13px;
        color: $text-color-secondary;
        .yes-pay {
          color: $text-color-free;
        }
        .no-pay {
          color: $text-color-price;
        }
        .cancel {
          color: $text-color-secondary;
        }
      }
      .operation {
        .el-button + .el-button {
          margin-left: 0;
        }
        .el-button {
          padding: 3px 8px;
          font-size: 13px;
        }
        .cancel {
          color: $text-color-auxiliary;
        }
        .success {
          font-size: 13px;
          color: $text-color-secondary;
        }
        .el-link--default {
          color: $text-color-auxiliary;
          &:hover {
            @include edu-color-auxiliary;
          }
        }
        .el-link + .el-link {
          margin-top: 10px;
        }
        .el-link--danger {
          color: $text-color-price;
        }
      }
    }
  }
}
</style>
